<template>
<!--  登录页面  -->
    <div>
        <div class="top">
            <div class="top-title1">
                NPMS AUTHENTICATION
            </div>
            <div class="top-title2">
                Uniform Identity Authentication
            </div>
        </div>
        <div class="center">
            <div style="position:absolute; width: 510px;top: 352px;margin-left: 413px">
                <img src="@/assets/icon/1.png"/>
            </div>

            <div class="login-box">
                <div
                    style="position:absolute;;left: 52px;top: 64px;color: rgba(16, 16, 16, 100);font-size: 24px;text-align: left;font-family: SourceHanSansSC-regular;">
                    User Login
                </div>
                <div
                    style="position: absolute;background-color: #D6E9FF;width: 200px;height: 44px;left: 217px;top: 34px;border-radius: 10px">
                    <div style="position:absolute;left: 14px;top: 10px">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                             style="fill: rgba(58, 98, 215, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                             filter="none">
                            <path
                                d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
                        </svg>
                    </div>
                    <div style="position: absolute;left: 43px;top: 14px;color:#3A62D7;font-size: 13px">
                        Safer Login by QR Code
                    </div>

                </div>
                <div>
                    <div style="position:absolute;left: 415px;top: 14px">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="100" height="100"
                             style="fill: rgba(58, 98, 215, 1);border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid"
                             filter="none">
                            <path
                                d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zm-56 284H192V612h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm590-630H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-32 284H612V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210h-48c-4.4 0-8 3.6-8 8v134h-78V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V644h78v102c0 4.4 3.6 8 8 8h190c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zM746 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm142 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path>
                        </svg>
                    </div>
                    <div style="position:absolute;left: 415px;top: 14px">
                        <img src="@/assets/icon/2.png"/>
                    </div>
                </div>
                <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"

                >


                    <el-form-item
                        style="position:absolute;left: 52px;top: 140px;border-radius:15px;width: 420px;"

                        prop="username">
                        <el-input
                            class="login-input"
                            prefix-icon="el-icon-user"
                                  placeholder="Please input username"
                                  size="large"
                                  v-model.number="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item
                        style="position:absolute;left: 52px;top: 225px;border-radius:15px;width: 420px;"

                        prop="pass">
                        <el-input prefix-icon="el-icon-lock"
                                  class="login-input"
                                  placeholder="Please input password"
                                  size="large"
                                  v-model="loginForm.pass"
                                  autocomplete="off"
                                  show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <button type="primary" native-type="submit"
                                class="login-button"
                                @click.prevent="submitForm('loginForm')">Login
                        </button>
                    </el-form-item>
                </el-form>
                <el-checkbox style="position: absolute;left: 52px;top: 399px;font-size: 18px">Remember me</el-checkbox>
                <div style="position: absolute;left: 390px;top: 399px;color: #3A62D7">Register></div>
                <div
                    style="position: absolute;top: 479px;width: 519px;height:80px;background-color:#E8F3FF;border-radius:  0px 0px 30px 30px; ">
                    <div style="position:absolute;left: 52px;top: 30px;font-size: 12px;font-weight: bold">
                        Other Login Methods
                    </div>
                    <div style="position: absolute;display:flex;left:180px;top: 28px">
                        <div style="margin-left: 15px">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24" height="24"
                                 style="fill: rgba(121, 210, 98, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"></path>
                            </svg>
                        </div>
                        <div style="margin-left: 15px">

                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="24" height="24"
                                 style="fill: rgba(184, 29, 47, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M457.3 543c-68.1-17.7-145 16.2-174.6 76.2-30.1 61.2-1 129.1 67.8 151.3 71.2 23 155.2-12.2 184.4-78.3 28.7-64.6-7.2-131-77.6-149.2zm-52 156.2c-13.8 22.1-43.5 31.7-65.8 21.6-22-10-28.5-35.7-14.6-57.2 13.7-21.4 42.3-31 64.4-21.7 22.4 9.5 29.6 35 16 57.3zm45.5-58.5c-5 8.6-16.1 12.7-24.7 9.1-8.5-3.5-11.2-13.1-6.4-21.5 5-8.4 15.6-12.4 24.1-9.1 8.7 3.2 11.8 12.9 7 21.5zm334.5-197.2c15 4.8 31-3.4 35.9-18.3 11.8-36.6 4.4-78.4-23.2-109a111.39 111.39 0 0 0-106-34.3 28.45 28.45 0 0 0-21.9 33.8 28.39 28.39 0 0 0 33.8 21.8c18.4-3.9 38.3 1.8 51.9 16.7a54.2 54.2 0 0 1 11.3 53.3 28.45 28.45 0 0 0 18.2 36zm99.8-206c-56.7-62.9-140.4-86.9-217.7-70.5a32.98 32.98 0 0 0-25.4 39.3 33.12 33.12 0 0 0 39.3 25.5c55-11.7 114.4 5.4 154.8 50.1 40.3 44.7 51.2 105.7 34 159.1-5.6 17.4 3.9 36 21.3 41.7 17.4 5.6 36-3.9 41.6-21.2v-.1c24.1-75.4 8.9-161.1-47.9-223.9zM729 499c-12.2-3.6-20.5-6.1-14.1-22.1 13.8-34.7 15.2-64.7.3-86-28-40.1-104.8-37.9-192.8-1.1 0 0-27.6 12.1-20.6-9.8 13.5-43.5 11.5-79.9-9.6-101-47.7-47.8-174.6 1.8-283.5 110.6C127.3 471.1 80 557.5 80 632.2 80 775.1 263.2 862 442.5 862c235 0 391.3-136.5 391.3-245 0-65.5-55.2-102.6-104.8-118zM443 810.8c-143 14.1-266.5-50.5-275.8-144.5-9.3-93.9 99.2-181.5 242.2-195.6 143-14.2 266.5 50.5 275.8 144.4C694.4 709 586 796.6 443 810.8z"></path>
                            </svg>
                        </div>
                        <div style="margin-left: 15px">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="24" height="24"
                                 style="fill: rgba(56, 148, 255, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"></path>
                            </svg>

                        </div>
                    </div>
                    <div style="color:#101010;position: absolute;left: 382px;top: 30px;font-size: 14px">
                        Forget password？
                    </div>
                </div>
            </div>

        </div>
        <div class="bottom">
            <div class="bottom-title">
                Copyright © All Rights Reserved 2021.7
            </div>

        </div>


    </div>
</template>

<script>

export default {
    name: "AuthCenter",
    data() {
        var checkUsername = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('Please input username'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input password'));
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                pass: '',
                username: ''
            },
            rules: {
                pass: [
                    {validator: validatePass, trigger: 'change'}
                ],
                username: [
                    {validator: checkUsername, trigger: 'change'}
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.loginForm)
                    var data = {
                        grant_type: 'password',
                        username: this.loginForm.username,
                        password: this.loginForm.pass,
                        client_id: 'client-app',
                        client_secret: '123456'
                    }
                    this.$axios2.post(
                        '/auth/oauth/token',
                        data
                    ).then(res => {
                        if (res.data.code === 200) {
                            var token = res.data.data.token
                            localStorage.setItem("token", token);
                            this.$message.success("Authentication success！")
                            var redirect = this.$route.query.redirect ? this.$route.query.redirect : '/main'
                            this.$router.push({
                                path: '/redirect',
                                query: {
                                    info: "Login success！",
                                    to: redirect
                                }
                            })
                        } else {
                            this.$message.error("[CODE:" + res.data.code + "] " + res.data.message)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>


<style scoped>

.top {
    min-width: 1910px;

    width: 100%;
    height: 125px;
    background-color: white;
    display: flex;


}

.top-title1 {
    margin-left: 350px;
    padding-top: 35px;

    height: 54px;
    color: rgba(58, 98, 215, 100);
    font-size: 36px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}

.top-title2 {
    left: 695px;
    padding-top: 52px;
    margin-left: 10px;
    width: 500px;
    height: 30px;
    color: rgba(58, 98, 215, 100);
    font-size: 20px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}

.center {
    min-width: 1910px;
    width: 100%;
    min-height: 774px;

}

.bottom {
    min-width: 1910px;
    position: absolute;
    width: 100%;
    height: 85px;
    bottom: 0;
    background-color: white;

}

.bottom-title {
    width: 100%;
    text-align: center;
    padding-top: 30px;

    height: 20px;
    color: rgba(170, 170, 170, 100);
    font-size: 14px;
    font-family: SourceHanSansSC-regular;
}

.login-box {
    position: absolute;
    width: 519px;
    height: 559px;
    background-color: white;
    top: 226px;
    left: 1023px;
    border-radius: 30px;


}

.login-button {
    position: absolute;
    left: 52px;
    top: 310px;
    border-radius: 15px;
    width: 420px;
    height: 52px;
    background-color: #3A62D7;
    border: none;
    color: white;
    transition: all 300ms;
    cursor: pointer;
}
.login-button:hover {
    position: absolute;
    left: 52px;
    top: 310px;
    border-radius: 15px;
    width: 420px;
    height: 52px;
    background-color: #54a1ff ;
    border: none;
    color: white;
    transition: all 300ms;
}
.login-input >>> .el-input__inner {
    -moz-appearance: none;
    font-size: 16px;
    color: #313131;
    outline: 0;
    width: 420px;
    height: 55px;
    line-height: 20px;
    border-radius: 15px 15px 15px 15px;
    background-color: rgba(255, 255, 255, 100);
    text-align: left;
    border: 1px solid rgba(220, 220, 220, 100);
}
.login-input >>> .el-input__inner:focus{
    border: 1px solid #3aa8e5;
}

.login-input >>> .el-input__icon {
    font-size: 18px;
    margin-top: 2px;
}
</style>